<template>
<div>
				<!-- 5. $CONTENT ===================================================================================

		Content
-->

				<!-- Content here -->
 
				<div class="page-header">

					<div class="row">
						<!-- Page header, center on small screens -->
						<h1 class="col-xs-12 col-sm-4 text-center text-left-sm"><i class="fa fa-map-marker page-header-icon"></i>&nbsp;&nbsp;地图分布</h1>
	
						<div class="col-xs-12 col-sm-8">
							<div class="row">
								<hr class="visible-xs no-grid-gutter-h">							
								<!-- Search field -->
								<div class="pull-right col-xs-12 col-sm-6">
									<div class="input-group no-margin">
										<span class="input-group-addon" style="border:none;background: #fff;background: rgba(0,0,0,.05);"><i class="fa fa-search"></i></span>
										<input type="text" placeholder="请输入关键字" class="form-control no-padding-hr" style="border:none;background: #fff;background: rgba(0,0,0,.05);">
									</div>
								</div>
								
								<!-- Margin -->
								<div class="visible-xs clearfix form-group-margin"></div>
								
								<div class="pull-right col-xs-12 col-sm-auto">
									<select class="form-control" style="border:none;background: #fff;background: rgba(0,0,0,.05);">
												<option>请选择店铺类型</option>
												<option>直营店</option>
												<option>加盟店</option>
											</select>
								</div>
				
							</div>
						</div>
		
					</div>
				</div>
				<!-- / .page-header -->


				<div class="row">
					<div class="col-sm-12">
							<div class="panel-body">
								
								<ul id="uidemo-tabs-default-demo" class="nav nav-tabs">
									<li class="active">
										<a href="#uidemo-tabs-default-demo-home" data-toggle="tab">直营店</a>
									</li>
									<li class="">
										<a href="#uidemo-tabs-default-demo-profile" data-toggle="tab">加盟店</a>
									</li>
								</ul>
		
								<div class="tab-content tab-content-bordered pb5">
									<div class="tab-pane fade active in" id="uidemo-tabs-default-demo-home">
										
										<div class="buttons-with-margins">
											<button class="btn btn-danger">全部</button> &nbsp;&nbsp;
											<button class="btn">郑东新区</button> &nbsp;&nbsp;
											<button class="btn">高新技术开发区</button> &nbsp;&nbsp;
											<button class="btn">惠济区</button> &nbsp;&nbsp;
											<button class="btn">管城区</button> &nbsp;&nbsp;
											<button class="btn">金水区</button> &nbsp;&nbsp;
											<button class="btn">中原区</button> &nbsp;&nbsp;
											<button class="btn">南龙湖</button> &nbsp;&nbsp;
											<button class="btn">北龙湖</button> &nbsp;&nbsp;
											<button class="btn">港区</button>
										</div> 
										
									</div> <!-- / .tab-pane -->
									<div class="tab-pane fade" id="uidemo-tabs-default-demo-profile">
										<div class="buttons-with-margins">
											<button class="btn btn-danger">全部</button> &nbsp;&nbsp;
											<button class="btn">东区</button> &nbsp;&nbsp;
											<button class="btn">西区</button> &nbsp;&nbsp;
											<button class="btn">火车站</button> &nbsp;&nbsp;
											<button class="btn">管城区</button> &nbsp;&nbsp;
											<button class="btn">金水区</button>
										</div>										
									</div> <!-- / .tab-pane -->
								</div> <!-- / .tab-content -->
								
							</div>
							
							
							
							<div class="col-md-8 p0">
								<div class="panel-body mt20" style="position:relative;height: 782px;">
									 <div class="widget-maps" id="widget-maps-example"></div>
								</div>
							</div>
							<div class="col-md-4 p0">
								<div class="panel-body mt20" style="position:relative; height: 375px;">
									<div class="note note-info">线性图表</div>
									<div class="graph-container">
										<div id="jq-flot-graph"></div>
									</div>
								</div>
								
								<div class="panel-body" style="position:relative; height: 407px;">
									<div class="note note-info">圆形图标</div>
									<div class="graph-container">
										<div id="jq-flot-pie"></div>
									</div>
								</div>
							</div>
							
							
						</div>

					</div>
</div>
</template>
   
<script>

  
	 
export default {
   data() {
            return {
				uploaderHeader: {
					'X-miniapp-Token': localStorage.getItem('token') || '',
					},
				oneshow:true,
				twoshow:false,
				doughnutChartData: [{
							label: "Series1", data: 50
						}, {
							label: "Series2", data: 30
						}, {
							label: "Series3", data: 90
						}, {
							label: "Series4", data: 70
						}, {
							label: "Series5", data: 80
						}, {
							label: "Series6", data: 110
						}, {
							label: "Series9", data: 90
						}],
				visitsChartData: [{
							label: 'Visits',
							data: [
								[6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 2000], [13, 1950], [14, 1900], [15, 2000]
							]
						}, {
							label: 'Returning Visits',
							data: [
								[6, 500], [7, 600], [8, 550], [9, 600], [10, 800], [11, 900], [12, 800], [13, 850], [14, 830], [15, 1000]
							],
							filledPoints: true // Fill points
						}],
			 
            }
		},
	methods:{
		initPie() {

			console.log($('#jq-flot-pie'));
			$('#jq-flot-pie').pixelPlot(this.doughnutChartData, {
							series: {
								pie: {
									show: true,
									radius: 1,
									innerRadius: 0.5,
									label: {
										show: true,
										radius: 3 / 4,
										formatter: function (label, series) {
											return '<div style="font-size:14px;text-align:center;padding:2px;color:white;">' + Math.round(series.percent) + '%</div>';
										},
										background: { opacity: 0 }
									}
								}
							}
						}, {
							height: 205
						});
		}
	},
	created () {
			this.initPie()
		}
}
</script>
